import c from 'classnames'
import { ContactType } from '@/services/contacts'
import './categories.module.less'

export default function Categories(props: {
  current: ContactType
  setCurrent: (type: ContactType) => void
}) {
  const { current, setCurrent } = props
  return <section styleName="contact-type">
    <Category
      type={ContactType.external}
      currentType={current}
      setCurrent={setCurrent}
      name="客户"
    />
    <Category type={ContactType.group} currentType={current} setCurrent={setCurrent} name="群" />
    <Category
      type={ContactType.internal}
      currentType={current}
      setCurrent={setCurrent}
      name="员工"
    />
  </section>
}

function Category(props: {
  type: ContactType
  name: string
  currentType: ContactType
  setCurrent: (type: ContactType) => void
}) {
  const { type, name, currentType, setCurrent } = props
  return <div styleName={c({ current: type === currentType })} onClick={() => setCurrent(type)}>
    {name}
  </div>
}
